<script setup>
import api from '../api/userlogin_api.js'
import loginApi from '@/api/login_api.js';
import {ref, onMounted,inject} from "vue";
import {ElMessage} from "element-plus";

// 获取当前用户信息
const currentUserInfo = inject('currentUserInfo');
const userInfo = ref({});
const editWinVisible = ref(false);
const editObj = ref({});

// 定义方法 - 头像上传
const handleAvatarSuccess = (response, file) => {
  console.log('---------------------');
  console.log(response);//响应数据
  editObj.value.photo = response.data;//设置头像
}



// 编辑提交
const editCommit = async () => {
  try {
    await api.edit(editObj.value);
    ElMessage.success('修改成功');
    editWinVisible.value = false;
    loadUserInfo(); // 重新加载用户信息
  } catch (error) {
    ElMessage.error('修改失败');
  }
}

// 打开编辑窗口
const handleEdit = () => {
  editObj.value = {...userInfo.value};
  delete editObj.value.user_password;
  editWinVisible.value = true;
}

onMounted(() => {
  console.log('当前用户信息:', currentUserInfo.value);
  console.log('当前用户id:', currentUserInfo.value.user_id);
  loadUserInfo();
});
// 加载当前用户信息
const loadUserInfo = async () => {
  if (currentUserInfo.value && currentUserInfo.value.user_id) {
    try {
      const result = await loginApi.getlogin();// 这里没有处理接口失败的情况;
      userInfo.value = result;
    } catch (error) {
      ElMessage.error('获取用户信息失败');
    }
  }
}
</script>

<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
          <el-button type="primary" @click="handleEdit">编辑</el-button>
        </div>
      </template>

      <el-descriptions :column="1" border>
        <el-descriptions-item label="居民账号ID">{{ userInfo.user_id }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar :src="userInfo.photo" size="medium">
            <img src='../assets/logo.png' alt="默认头像" v-if="!userInfo.photo" />
          </el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="居民账号">{{ userInfo.user_name }}</el-descriptions-item>
        <el-descriptions-item label="居民ID">{{ userInfo.resident_id }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editWinVisible" title="编辑个人信息" width="500">
      <el-form :model="editObj">
        <el-form-item label="居民账号" :label-width="100">
          <el-input v-model="editObj.user_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="居民ID" :label-width="100">
          <el-input v-model="editObj.resident_id" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="100">
          <el-input v-model="editObj.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="头像" :label-width="100">
          <el-upload
              class="avatar-uploader"
              action="/api/upload/file"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="editObj.photo" :src="editObj.photo" style="width:100px" />
            <img v-else src='@/assets/logo.png' style="width:100px"/>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editWinVisible = false">取消</el-button>
          <el-button type="primary" @click="editCommit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>